<template>
    <div class="userDetail">
        <div class="top">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>{{ user.userName }}</span>
                    <el-button style="float: right;" type="text">操作按钮</el-button>
                </div>
                <div class="body">
                    <el-image :src="$ip + user.userImage" style="width: 150px;"></el-image>
                </div>
            </el-card>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
            <el-tab-pane label="书架" name="0">
                <el-empty description="该用户没有书架！"></el-empty>
            </el-tab-pane>
            <el-tab-pane label="喜欢的歌曲" name="1">
                <el-empty description="该用户没有喜欢的歌曲！"></el-empty>
            </el-tab-pane>
            <el-tab-pane label="歌单" name="2">
                <el-empty description="该用户没有歌单！"></el-empty>
            </el-tab-pane>
            <el-tab-pane label="发过的评论" name="3">
                <el-empty description="该用户没有评论！"></el-empty>
            </el-tab-pane>
            <el-tab-pane label="日志记录" name="4">
                <userLog/>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import userLog from './userLog.vue';
    import { getUserDetail } from '@/api/user'
    export default {
        components : {
            userLog
        },
        data(){
            return {
                activeName : '0',
                user : {}
            }
        },
        created(){
            this.getData()
        },
        methods : {
            handleClick(){

            },
            getData(){
                getUserDetail(this.$route.query.uid).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.user = res.data
                    }
                })
            }
        }
    }
</script>

<style lang="less" scoped>
.userDetail{
    padding: 20px;
    .top{
        margin: 10px 0;
        .body{
            
        }
    }
}
</style>